<template>
  <main class="main">
    <!-- 右边内容部分 -->
    <div class="main-content">
      <div class="main-left">
        <div class="left-content">
          <!-- 顶部工具类-推荐/关注 -->
          <div>
            <el-tabs
              v-model="activeName"
              :stretch="true"
              @tab-click="tabs_handleClick"
            >
              <el-tab-pane :label="$t('index.recommend')" name="1">
                <!-- 发帖开始 -->
                <UserPost @reflashed="initData" />
                <MainNewPostListComponents ref="child" />
              </el-tab-pane>
              <el-tab-pane :label="$t('index.attention')" name="2">
                <!-- 发帖 -->
                <UserPost @reflashed="initData" />
                <MainYouFoUserPostListComponents ref="child2" />
              </el-tab-pane>
            </el-tabs>
          </div>
        </div>
      </div>
      <MainRight />
    </div>
  </main>
</template>
<script>
//MainRight
import MainRight from "@/components/MainRight.vue";
//UserPost
import UserPost from "@/components/UserPost.vue";
//新帖子组件
import MainNewPostListComponents from "@/components/Main/MainNewPostListComponents.vue";
import MainYouFoUserPostListComponents from "@/components/Main/MainYouFoUserPostListComponents.vue";

export default {
  name: "MainContent",
  components: {
    MainRight,
    UserPost,
    MainNewPostListComponents,
    MainYouFoUserPostListComponents,
  },
  props: {
    msg: String,
  },
  data() {
    return {
      activeName: "1",
      ForYouData: {
        currentPage: 1, //起始页数值为1
        loading: false,
        addloadBtn: true,
        pageSize: 10, //每页查询条数
        pageTotal: 1, //取后端返回内容的总页数
        //测试数据
        ForYouList: [
          // { user_id: 1, username: "e4glet", user_nickname: "eaglet",user_headimg:"",user_bgimg:"",user_info:"测试介绍1",user_fo:12,user_fans:500,post_content:"测试内容1",zf_counts:0,tp_url:"http://localhost:8080/img/2023-10-24/8fdaccb2-dfe0-4377-ad30-6413d0a9272e.png",sp_url:"",post_time:"2023-10-24 14:20:02" },
          // { user_id: 1, username: "e4glet", user_nickname: "eaglet",user_headimg:"",user_bgimg:"",user_info:"测试介绍2",user_fo:12,user_fans:500,post_content:"测试内容2",zf_counts:0,tp_url:"http://localhost:8080/img/2023-10-24/9551c6c3-a386-44da-850b-8c71d210b104.jpg|http://localhost:8080/img/2023-10-24/8fdaccb2-dfe0-4377-ad30-6413d0a9272e.png",sp_url:"" ,post_time:"2023-10-24 14:20:02"},
          // { user_id: 1, username: "e4glet", user_nickname: "eaglet",user_headimg:"",user_bgimg:"",user_info:"测试介绍3",user_fo:12,user_fans:500,post_content:"测试内容3",zf_counts:0,tp_url:"",sp_url:"http://localhost:8080/video/2023-10-24/b1618202-b0f8-4cc8-83a2-1b50ee284ce8.mp4",post_time:"2023-10-24 14:20:02"},
        ], //加载推荐贴文数组
      },
      loading: true,
      YouFoData: {
        currentPage: 1, //起始页数值为1
        loading: false,
        pageSize: 10, //每页查询条数
        pageTotal: 1, //取后端返回内容的总页数
        YouFoList: [], //关注贴文列表
        current_user_id: JSON.parse(localStorage.getItem("user")).user_id
          ? JSON.parse(localStorage.getItem("user")).user_id
          : 1,
      },
    };
  },
  computed: {
    noMore() {
      //当起始页数大于总页数时停止加载
      return this.ForYouData.currentPage >= this.ForYouData.pageTotal;
    },
    addMore() {
      return !this.noMore();
    },
    noMoreFoData() {
      //当起始页数大于总页数时停止加载
      return this.YouFoData.currentPage >= this.YouFoData.pageTotal;
    },
    addMoreFoData() {
      return !this.noMoreFoData();
    },
  },
  destoryed(){
    // window.removeEventListener("scroll", this.handleScroll);
  },
  mounted() {
    this.initData();
    // window.addEventListener("scroll", this.handleScroll);
  },
  methods: {
    //定义滚动高度
    handleScroll(){
      let scrollTop = document.documentElement.scrollTop;
      let documentHeight = document.body.scrollHeight
      this.scrollHeight = scrollTop;
      console.log("底部高度："+ documentHeight);
      console.log("当前滚轮高度：",this.scrollHeight);
      if(documentHeight-this.scrollHeight<1000){
        //点击加载
        this.addYouFoPostData();
        console.log("自动加载");
      }
    },   
    //发帖组件触发刷新
    initData() {
      this.$refs.child.initData();
    },
    //并且只有在用户点击正在关注选项卡的时候才加载数据
    tabs_handleClick(tab) {
      if (tab.name == "1") {
        this.initData();
      }
      if (tab.name == "2") {
        this.loadYouFoData();
      }
    },
    //获取当前用户关注者的发帖数据
    loadYouFoData() {
      this.$refs.child2.initData();
    },    
  },
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
/* 右侧主内容 */
.main {
  width: 990px;
  min-height: 415px;
  /* background-color: #ffffff;
  border-radius: 10px; */
  padding: 0 10px;
}

.main-content {
  display: flex;
  justify-content: space-between;
}

/* 内容左侧样式 */
.main-left {
  max-width: 600px;
  background-color: #ffffff;
  border-radius: 5px;
  margin-right: 15px;
}

.left-content {
  width: 600px;
  /* display: flex;
	flex-direction: column; */
}

.is-active {
  font-weight: bold;
}

/* 新增帖子数量样式 */
.post_new_counts {
  text-align: center;
  border-bottom: 1px solid rgb(239, 243, 244);
  line-height: 48px;
  color: rgb(29, 155, 240);
  cursor: pointer;
}

/* 备注：应用下拉加载的外层容器必须设置固定高度，否则会自动无限加载 */
.infinite-list-panel {
  overflow: hidden;
}

.infinite-list {
  overflow: auto;
  /* height: 100vh; */
}

.infinite-list-panel .addload {
  padding: 10px 0;
  text-align: center;
  cursor: pointer;
  color: rgb(29, 155, 240);
  font-weight: 700;
}

.infinite-list-panel .loading,
.infinite-list-panel .nomore {
  text-align: center;
  padding: 10px 0;
  font-weight: 700;
}

.NoData {
  padding: 10px 0;
  text-align: center;
  font-weight: 700;
}
/* .list-item{
  display: flex;
} */

@media screen and (max-width: 720px) {
  .main {
    width: 100%;
    padding: 0;
  }
  .main-left {
    width: 100%;
    margin-right: 0px;
    margin-bottom: 54px;
  }

  .left-content {
    width: 100%;
  }
}

@media (max-width: 1050px) {
  .main {
    max-width: 600px;
  }
  .main-right {
    display: none;
    width: auto;
  }
}

@media (max-width: 1300px) {
}
</style>
<style>
/* 覆盖 element ui 样式 */
.el-tabs__item {
  font-size: 18px !important;
}

.el-tabs__item.is-active {
  font-weight: bold;
  color: #000000 !important;
}

.el-tabs__header {
  /* 黏性定位 */
  position: sticky !important;
  top: 0;
  background-color: rgba(255, 255, 255, 0.85);
  z-index: 99;
}
</style>